<!-- 系统评价 -->
<template>
  <el-dialog
    :title="isUpdate?'系统评价信息':'系统评价信息'"
    :visible="visible"
    width="1300px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">

    <el-form
      size="mini"
      label-width="120px"
      class="ele-form-detail">
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="激活姓名:">
            <div class="ele-text-secondary">
              {{activateInfo.name}}
            </div>
          </el-form-item>
          <el-form-item label="激活邮箱:">
            <div class="ele-text-secondary">
              {{activateInfo.email}}
            </div>
          </el-form-item>
          <el-form-item label="星级:">
            <div class="ele-text-secondary">
              {{activateInfo.evaluate_star_rating}}星
            </div>
          </el-form-item>
          <el-form-item label="评价:">
            <div class="ele-text-secondary">
              {{activateInfo.comment}}
            </div>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="收货姓名:">
            <div class="ele-text-secondary">
              {{activateInfo.take_over_name}}
            </div>
          </el-form-item>
          <el-form-item label="收货邮箱:">
            <div class="ele-text-secondary">
              {{activateInfo.take_over_email}}
            </div>
          </el-form-item>
          <el-form-item label="激活(北京)时间:">
            <div class="ele-text-secondary">
              {{activateInfo.activate_time}}
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-table
        :data="monitorList"
        height="420"
        border
        style="width: 100%">
        <el-table-column
          prop="evaluation_user"
          label="评论人"
          width="180">
        </el-table-column>
        <el-table-column
          prop="evaluation_title"
          label="评价标题"
          width="180">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" :content="row.evaluation_title" placement="top">
              <div class="info-title" style="max-height: 120px">{{row.evaluation_title}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="evaluation_connent"
          label="评价内容">
          <template slot-scope="{row}">
            <el-tooltip class="item" effect="dark" :content="row.evaluation_connent" placement="top">
              <div class="info-title" style="max-height: 120px">{{row.evaluation_connent}}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="comment_image"
          label="评价图片">
          <template slot-scope="{row}">
            <el-popover placement="top-start" trigger="click">
              <img :src="row.comment_image" style="width: 250px;height: 250px">
              <img slot="reference" v-if="row.comment_image" :src="row.comment_image" style="width: 90px;height: 80px; cursor:pointer">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="evaluation_time"
          label="评价日期"
          width="120">
        </el-table-column>
        <el-table-column
          prop="percent"
          label="相似度"
          width="80">
          <template slot-scope="{row}">
            {{row.percent}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="stars"
          label="评价星级"
          width="80">
        </el-table-column>
        <el-table-column label="操作" width="190px" align="center" :resizable="false" fixed="right">
          <template slot-scope="{row}">
            <el-button
              v-if="activateInfo.comment_retention_results==0"
              style="margin-bottom: 7px"
              size="mini" type="success"
              @click="confirmMate(activateInfo.id,row.id,row.percent)">确认匹配</el-button>
            <el-button
              v-else
              style="margin-bottom: 7px"
              size="mini" type="info">已匹配</el-button>
            <el-button style="margin-bottom: 7px" size="mini" @click="copyComment(row.title_link)">复制评论链接</el-button>
            <el-button size="mini" @click="copyProfile(row.evaluation_user_profile)">复制Profile链接</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-form>

  </el-dialog>
</template>

<script>
export default {
  name: 'MatchDetail',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      form: Object.assign({status: 1}, this.data),
      // 表单验证规则
      rules: {
        url: [
          {required: true, message: '请输入二维码Url', trigger: 'blur'}
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      monitorList:[],
      activateInfo:[],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.getMatchDetail();
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    }
  },
  mounted() {

  },
  methods: {

    getMatchDetail()
    {
      this.$http.post('/activate/getMatchDetail', {id: this.form.id,match_comment_list:this.form.match_comment_list}).then((res) => {
        this.loading = false;
        if (res.data.code === 0) {
          this.monitorList = res.data.data.monitor_list;
          this.activateInfo = res.data.data.activate_info;
        } else {
          this.$message({type: 'error', message: res.data.msg, offset: 160});
        }
      });
    },

    /* 确认匹配 */
    confirmMate(activate_id,monitor_connect_id,percent)
    {

      this.$confirm('确定匹配成功后则无法匹配其他评论,请确认', '提示', {
        type: 'warning'
      }).then(() => {
        this.$http.post('/activate/confirmMate', {activate_id: activate_id,monitor_connect_id:monitor_connect_id,percent:percent}).then(res => {
          if (res.data.code === 0) {
            this.$message.success(res.data.msg);
            this.updateVisible(false);
            this.$emit('done');
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(e => {
          this.$message.error(e.message);
        });
      }).catch(() => {
      });

    },

    /* 复制评论链接 */
    copyComment(comment)
    {
      this.$copyText(comment);
      this.$message.success('复制成功');
    },

    /* 复制Profile链接 */
    copyProfile(profile)
    {
      this.$copyText(profile);
      this.$message.success('复制成功');

    },

    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http.post('/commentGuideLink/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 1px;
}

::v-deep .ele-text-secondary {
  color: #222;
}

</style>
